<template>
  <div class="fo-box">
    <div class="fo-heard">
      <div class="fo-heard-l">
        <i class="iconfont">&#xe64e;</i>
      </div>
      <div class="fo-heard-r">
        <h1>发现</h1>
      </div>
    </div>

    <div class="fo-main">
      <div class="fo-main-l">
        <p class="fo-main-l1">积分商城</p>
        <p class="fo-main-l2">0元好物在这里！</p>
        <img src="https://fuss10.elemecdn.com/8/38/9c9aea0e856149083d84af3444b78jpeg.jpeg?imageMogr/format/webp/" />
      </div>
      <div class="fo-main-r">
        <div class="fo-main-rt">
          <div class="fo-main-rtbox">
            <p class="fo-main-rtbox1">美味爆料</p>
            <p class="fo-main-rtbox2">无啤酒不夏天</p>
          </div>
          <img src="https://fuss10.elemecdn.com/e/ff/3b9c4a4dfda1df548dc9274f6a7c1jpeg.jpeg?imageMogr/format/webp/" />
        </div>
        <div class="fo-main-rb">
          <div class="fo-main-rbbox">
            <p class="fo-main-rbbox1">推荐有奖</p>
            <p class="fo-main-rbbox2">5元现金拿不停</p>
          </div>
          <img src="https://fuss10.elemecdn.com/6/76/8d42eef97ff4c1c2b671085358541jpeg.jpeg?imageMogr/format/webp/" />
        </div>
      </div>
    </div>

    <div class="fo-img">
      <img src="https://fuss10.elemecdn.com/b/6d/656006edcd86033a1b32b23ddea37jpeg.jpeg?imageMogr/format/webp/" />
    </div>

    <div class="fo-hotfood">
      <div class="fo-hotfood-good">
        <div class="fo-hotfood-gbox">
          <div class="fo-hotfood-gbox1"><i class="iconfont">&#xe66c;</i>美食热推</div>
          <div class="fo-hotfood-gbox2">你的口味，我都懂得</div>
        </div>
      </div>
      <div class="fo-hotfood-list">
        <ul class="fo-hotfood-list1">
          <li><img src="https://fuss10.elemecdn.com/e/c2/260b8900f6d9cffaab4b2b44bc331jpeg.jpeg?imageMogr/format/webp/" /> </li>
          <li>排骨拼滑鸡</li>
          <li>¥22.8</li>
        </ul>

        <ul class="fo-hotfood-list2">
          <li><img src="https://fuss10.elemecdn.com/b/cd/a053845b3ad2e5b4e08f1e9dbdb6cjpeg.jpeg?imageMogr/format/webp/" /> </li>
          <li>自选双拼饭（请备注拼品）</li>
          <li>¥30</li>
        </ul>

        <ul class="fo-hotfood-list3">
          <li><img src="https://fuss10.elemecdn.com/1/92/b51f43b042da9c40e0b835160446fjpeg.jpeg?imageMogr/format/webp/" /> </li>
          <li>2人套餐 A</li>
          <li>¥100</li>
        </ul>
      </div>
      <div class="fo-hotfood-more">
        <p class="fo-hotfood-morep">查看更多<i class="iconfont">&#xe612;</i></p>
      </div>
    </div>

    <div class="fo-gift">
      <div class="fo-gift-good">
        <div class="fo-gift-gbox">
          <div class="fo-gift-gbox1"><i class="iconfont">&#xe65a;</i>限时好礼</div>
          <div class="fo-gift-gbox2">小积分换豪礼</div>
        </div>
      </div>
      <div class="fo-gift-list">
        <ul class="fo-gift-list1" v-for="item in list">
          <li><img :src="item.image_hash" /> </li>
          <li>{{ item.title }}</li>
          <li><i>{{ item.points_required }}积分</i><span>¥{{ item.original_price }}</span></li>
          <span class="span1">{{ item.corner_marker }}</span>
        </ul>

        
      </div>
      <div class="fo-gift-more">
        <p class="fo-gift-morep">查看更多<i class="iconfont">&#xe612;</i></p>
      </div>
    </div>

    <div class="fo-div"></div>
    <Footerr/>
  </div>

</template>

<script>
  import Footerr from './Footerr'
  import axios from 'axios'
  export default {
    data:function(){
      return {
        list: ''
      }
    },
    components: {
      Footerr,
    },

    mounted:function(){
      var that=this;
      axios.get('http://localhost:3000/gift').then(function(res){
        
        var data= res.data;
        if(data && data.length > 0){
          var arr=data;
          arr.map(function(item,index){
            var a=item.image_hash.split('');
            a.splice(1,0,'/');
            a.splice(4,0,'/');
            var arr1=a.join('');
            if(arr1.indexOf('jpeg')!=-1){
              item.image_hash='https://fuss10.elemecdn.com/'+arr1+'.jpeg?imageMogr/format/webp/';
            }else{
              item.image_hash='https://fuss10.elemecdn.com/'+arr1+'.jpeg?imageMogr/format/webp/';
            }
          })
          
          that.list=arr;
        }else{
          console.log('err');
        }
      }).catch(function(err){
        console.log('err');
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../static/hotcss/px2rem.scss';
  .fo-box {
    background: #f5f5f5;
    .fo-heard {
      height: px2rem(88);
      width: 100%;
      background: #009dff;
      display: flex;
      position: fixed;
      top: 0;
      .fo-heard-l {
        width: px2rem(88);
        height: px2rem(88);
        line-height: px2rem(88);
        text-align: center;
        .iconfont {
          font-size: px2rem(36);
          color: white;
        }
      }
      .fo-heard-r {
        height: px2rem(88);
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        h1 {
          font-size: px2rem(36);
          color: white;
          margin-right: px2rem(88);
        }
      }
    }
    .fo-main {
      width: 100%;
      height: px2rem(346);
      background: white;
      margin-top: px2rem(88);
      display: flex;
      .fo-main-l {
        width: px2rem(374);
        height: px2rem(346);
        border-right: px2rem(2) solid #f9f9f9;
        .fo-main-l1 {
          font-size: px2rem(34);
          color: #ff9700;
          margin: px2rem(54) 0 0 px2rem(30);
        }
        .fo-main-l2 {
          font-size: px2rem(22);
          color: #999999;
          margin: px2rem(20) 0 0 px2rem(30);
        }
        img {
          width: px2rem(150);
          height: px2rem(150);
          margin: px2rem(30) 0 0 px2rem(86);
        }
      }
      .fo-main-r {
        height: px2rem(346);
        width: px2rem(374);
        .fo-main-rt {
          width: px2rem(374);
          height: px2rem(172);
          border-bottom: px2rem(2) solid #f9f9f9;
          display: flex;
          .fo-main-rtbox {
            .fo-main-rtbox1 {
              font-size: px2rem(34);
              color: #f5785d;
              margin: px2rem(54) 0 0 px2rem(30);
            }
            .fo-main-rtbox2 {
              font-size: px2rem(22);
              color: #999999;
              margin: px2rem(20) 0 0 px2rem(30);
            }
          }
          img {
            width: px2rem(90);
            height: px2rem(90);
            margin: px2rem(44) 0 0 px2rem(82);
          }
        }
        .fo-main-rb {
          width: px2rem(374);
          height: px2rem(172);
          display: flex;
          .fo-main-rbbox {
            .fo-main-rbbox1 {
              font-size: px2rem(34);
              color: #5ac1e9;
              margin: px2rem(54) 0 0 px2rem(30);
            }
            .fo-main-rbbox2 {
              font-size: px2rem(22);
              color: #999999;
              margin: px2rem(20) 0 0 px2rem(30);
            }
          }
          img {
            width: px2rem(90);
            height: px2rem(90);
            margin: px2rem(44) 0 0 px2rem(82);
          }
        }
      }
    }
    .fo-img {
      margin: px2rem(22) 0 px2rem(11) 0;
      img {
        width: px2rem(750);
        height: px2rem(173);
      }
    }
    .fo-hotfood {
      width: 100%;
      height: px2rem(580);
      background: white;
      margin-bottom: px2rem(24);
      .fo-hotfood-good {
        width: 100%;
        height: px2rem(144);
        display: flex;
        justify-content: center;
        align-items: center;
        .fo-hotfood-gbox {
          .fo-hotfood-gbox1 {
            font-size: px2rem(36);
            color: black;
            font-weight: bold;
            .iconfont {
              font-size: px2rem(40);
              color: #f12c2c;
            }
          }
          .fo-hotfood-gbox2 {
            font-size: px2rem(21);
            color: #999999;
            margin-left: px2rem(3);
          }
        }
      }
      .fo-hotfood-list {
        width: 100%;
        height: px2rem(326);
        display: flex;
        justify-content: space-around;
        align-items: center;
        .fo-hotfood-list1 {
          margin-left: px2rem(25);
          li:nth-child(1) {
            img {
              width: px2rem(222);
              height: px2rem(220);
            }
          }
          li:nth-child(2) {
            font-size: px2rem(26);
            color: black;
            line-height: px2rem(82);
          }
          li:nth-child(3) {
            font-size: px2rem(25);
            color: #ff5339;
          }
        }
        .fo-hotfood-list2 {
          li:nth-child(1) {
            img {
              width: px2rem(222);
              height: px2rem(220);
            }
          }
          li:nth-child(2) {
            font-size: px2rem(26);
            color: black;
            line-height: px2rem(82);
            width: px2rem(200);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          li:nth-child(3) {
            font-size: px2rem(25);
            color: #ff5339;
          }
        }
        .fo-hotfood-list3 {
          margin-right: px2rem(25);
          li:nth-child(1) {
            img {
              width: px2rem(222);
              height: px2rem(220);
            }
          }
          li:nth-child(2) {
            font-size: px2rem(26);
            color: black;
            line-height: px2rem(82);
          }
          li:nth-child(3) {
            font-size: px2rem(25);
            color: #ff5339;
          }
        }
      }
      .fo-hotfood-more {
        width: 100%;
        height: px2rem(104);
        display: flex;
        justify-content: center;
        align-items: center;
        .fo-hotfood-morep {
          font-size: px2rem(28);
          color: #999999;
          .iconfont {
            font-size: px2rem(16);
            color: #999999;
            position: relative;
            top: px2rem(-4);
            left: px2rem(3);
          }
        }
      }
    }
    .fo-gift {
      width: 100%;
      height: px2rem(620);
      background: white;
      /*margin-bottom: px2rem(160);*/
      .fo-gift-good {
        width: 100%;
        height: px2rem(144);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: px2rem(40);
        .fo-gift-gbox {
          .fo-gift-gbox1 {
            font-size: px2rem(36);
            color: black;
            font-weight: bold;
            .iconfont {
              font-size: px2rem(40);
              color: #f12c2c;
            }
          }
          .fo-gift-gbox2 {
            font-size: px2rem(21);
            color: #999999;
            margin-left: px2rem(28);
          }
        }
      }
      .fo-gift-list {
        width: 100%;
        height: px2rem(326);
        display: flex;
        justify-content: space-around;
        align-items: center;
        .fo-gift-list1 {
          margin-left: px2rem(25);
          li:nth-child(1) {
            img {
              width: px2rem(222);
              height: px2rem(220);
            }
          }
          li:nth-child(2) {
            font-size: px2rem(26);
            color: black;
            line-height: px2rem(82);
          }
          li:nth-child(3) {
            font-size: px2rem(25);
            color: #ff5339;
            span {
              font-size: px2rem(20);
              color: #aaa;
              text-decoration: line-through;
            }
          }
          .span1 {
            position: relative;
            top: px2rem(-360);
            left: 0;
            font-size: px2rem(22);
            color: #fff;
            background: #413d3c;
            padding: px2rem(8);
          }
        }
        .fo-gift-list2 {
          li:nth-child(1) {
            img {
              width: px2rem(222);
              height: px2rem(220);
            }
          }
          li:nth-child(2) {
            font-size: px2rem(26);
            color: black;
            line-height: px2rem(82);
            width: px2rem(200);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          li:nth-child(3) {
            font-size: px2rem(25);
            color: #ff5339;
            width: px2rem(80);
            white-space: nowrap;
            /*overflow: hidden;*/
            text-overflow: ellipsis;
            span {
              font-size: px2rem(20);
              color: #aaa;
              text-decoration: line-through;
            }
          }
          .span1 {
            position: relative;
            top: px2rem(-360);
            left: 0;
            font-size: px2rem(22);
            color: #fff;
            background: #413d3c;
            padding: px2rem(8);
          }
        }
        .fo-gift-list3 {
          margin-right: px2rem(25);
          li:nth-child(1) {
            img {
              width: px2rem(222);
              height: px2rem(220);
            }
          }
          li:nth-child(2) {
            font-size: px2rem(26);
            color: black;
            line-height: px2rem(82);
          }
          li:nth-child(3) {
            font-size: px2rem(25);
            color: #ff5339;
          }
          .span1 {
            position: relative;
            top: px2rem(-360);
            left: 0;
            font-size: px2rem(22);
            color: #fff;
            background: #413d3c;
            padding: px2rem(8);
          }
        }
      }
      .fo-gift-more {
        width: 100%;
        height: px2rem(104);
        display: flex;
        justify-content: center;
        align-items: center;
        .fo-gift-morep {
          font-size: px2rem(28);
          color: #999999;
          .iconfont {
            font-size: px2rem(18);
            color: #999999;
            position: relative;
            top: px2rem(-4);
            left: px2rem(3);
          }
        }
      }
    }
    .fo-div {
      width: 100%;
      height: px2rem(40);
      background: #f5f5f5;
      margin-bottom: px2rem(90);
    }
  }
</style>